<template>
	<view class="containerbox">
		<uv-navbar left-text="阅读记录" bg-color="transparent" auto-back placeholder>
			<template #right>
				<view class="pr-10 flex items-center" :style="{ marginRight: navRight }" @tap="pickerRef?.open">
					<uni-icons type="bars" size="40rpx" />
				</view>
			</template>
		</uv-navbar>
		
		<view class="h-20" />
		<scroll-view scroll-y class="containerbox" enable-flex>
			<view class="containerbox flex items-center justify-center" v-if="loading">
				<dw_loading :status="loading" class="mx-auto" />
			</view>
			
			<template v-if="!loading">
				<view class="mx-30" v-for="learn, index in list" :key="learn.id">
					<view class="sign-record-item mb-10 pb-10">
						<view class="sign-record-item__top flex items-center">
							<view class="sign-record-item__top_icon mr-20">
								<image :src="`${imgPath}record/historys.svg`" class="w-full h-full" />
							</view>
							
							<text class="text-gray text-22">{{ learn.createdAt }}</text>
						</view>
						
						<view class="sign-record-item__bottom track-content flex1 flex-bottom mt-10" :style="list.length - 1 !== index ? 'padding-bottom: 30rpx' : ''" @tap="toInfo(learn)">
							<view class="sign-record-item__bottom_view flex-between">
								<view class="flex-1 mr-30 flex">
									<text class="w-10 h-10 round-50 inline-block mr-15 mt-15" style="transform: translateY(-2rpx);background-color: #D8BE8B" />
									<view>
										<view class="text-26 mb-10">{{ learn.title }}</view>
										<view class="text-20 text-gray">
											<text class="text-white bgc-primary2 px-10 py-4 rd-10">{{ learn.sourceType?.name }}</text>
											<text class="mx-20">答对：{{ learn.exercise?.rightQuestionNumber || 0 }} / {{ learn.exercise?.totalQuestionNumber || 0 }}</text>
											<text>正确率：{{ learn.exercise?.rightQuestionNumber ? (learn.exercise?.rightQuestionNumber / (learn.exercise?.totalQuestionNumber || 0) * 100).toFixed(0) : 0 }} %</text>
										</view>
									</view>
								</view>
								
								<text class="text-22 text-gray-80" @tap.stop="toRecordInfo(learn)">报告</text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 空数据 -->
				<view class="flex-1 flex items-center justify-center" v-if="!list.length">
					<dw_default label="暂无更多记录~" :src="`${$imageBaseUrl}svg/empty.svg`" />
				</view>
			</template>
		</scroll-view>
		
		
		<uv-picker ref="pickerRef" :columns="[[{ name: '全部', id: '' }, ...courselist]]" key-name="name" round="32rpx" @confirm="handlePicker" />
	</view>
</template>

<script setup>
	
	import readApi from '@/common/apis/read';
	import { imgPath } from '@/common/config';
	import { onShow } from "@dcloudio/uni-app";
	import { getCourseList_api } from '@/common/apis/course';
	import { usePagination } from '@/common/hooks/usePagination';
	import { ref, getCurrentInstance, reactive, computed } from 'vue';
	
	
	/** 导航栏 margin-right */
	const navRight = ref(0);
	
	// #ifdef MP-WEIXIN
	/** 获取小程序胶囊信息 */
	const { width } = uni.getMenuButtonBoundingClientRect()
	navRight.value = `${width}px`;
	// #endif
	
	
	/** 课程列表 */
	const { list: courselist } = usePagination(getCourseList_api, {
		auto: true
	});
	
	const { user } = uni.$store();
	const infoData = computed(() => user.userInfo);
	
	
	/** 阅读记录列表 */
	const query = reactive({ courseId: '' });
	const { list, loading, refresh } = usePagination(readApi.courseArticleReadlist, {
		defaultParam: query,
		transform: result => result.list
	});
	
	onShow(async () => await refresh());
	function joinDay(dateTimeStamp) {
		const newT = new Date().getTime();
		const oldT = new Date(dateTimeStamp).getTime();
		const diffValue = newT - oldT;
		return Math.floor(diffValue / (24 * 3600 * 1000)) || 1;
	};
	
	
	/** 去详情 */
	const toInfo = item => {
		switch(item.sourceType?.value) {
			case 1:
			case 4: {
				uni.navigateTo({ url: `/pages/course/reading/result?examId=${item.exercise?.id}` });
				break;
			}
			
			case 2:
			case 3: {
				uni.navigateTo({ url: `/pages/course/aireading/answer?exerciseId=${item.exercise?.id}&articleId=${item.id}` });
				break;
			}
		}
	};
	
	/** 去阅读记录详情 */
	const toRecordInfo = item => {
		uni.navigateTo({ url: `/pages/course/aireading/record-info?id=${item.exercise?.id}` });
	};
	
	
	/** uv-picker */
	const pickerRef = ref({});
	
	/** handle picker */
	const handlePicker = async event => {
		query.courseId = event.value[0].id;
		await refresh();
	};


</script>

<style>page{background-color: #fff}</style>
<style lang="scss" scoped>
	.top{display: block; width: 100%; height: 300rpx; background-color: $primary}
	.sign-record-item {
		&__top_icon { width: 28rpx; height: 28rpx; }
		&__top { font-size: 24rpx; color: #fff; }
		&__top_sign-time {
			background: linear-gradient(45deg, #c4ccd1, #b9bfc4);
			border-radius: 0 20rpx 20rpx 0;
			padding: 6rpx 24rpx;
		}
		
		&__bottom {
			padding: 15rpx 0 0 48rpx;
			position: relative;
			&::before {
				content: '';
			    width: 1rpx;
			    height: 100%;
			    position: absolute;
			    background-color: #F5F5F5;
			    left: 13rpx;
			    top: 5rpx;
			    bottom: 5rpx;
			}
		}
		
		&__bottom_view {
			padding: 24rpx;
			border-radius: 10rpx;
			background-color: #F5F5F5;
		}
	}
</style>